import { Component, OnInit } from '@angular/core';
import { TimeService} from '../../service/timeservice/time.service';
import {  ViewEncapsulation, ViewChild } from '@angular/core';
import {PopupComponent, SkinType} from 'ngx-weui';
import { DialogConfig, DialogComponent } from 'ngx-weui/dialog';
import {Router} from '@angular/router';
declare var $: any;


@Component({
  selector: 'contrement',
  templateUrl: './contrement.component.html',
  styleUrls: ['./contrement.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class ContrementComponent implements OnInit {
  @ViewChild('simple') simplePopup: PopupComponent; // 底部
  @ViewChild('auto') autoAS: DialogComponent;
  type: number;
  rtype: number;
  time: any; // 所有的时间
  time1: any []= []; // 前四个时间
  time2: any []= []; // 后面的所有时间
  shown= false ; // 判断是否展示更多
  icon= true; // weui-icon-checked
  num = 0; // tag是编辑还是确认
  reshow = true;
  textdown = '展开更多';
  // 为单选按钮定义的res
  res: any = {
    cho2: true,
    agree: true
  };
  checkbox: any; // 时间按钮，也是单选按钮，每次只能选择一个时间
  radio: any; // 就诊人选择按钮
  index: number; // 选择的就诊人的index

// 对话框的内容及实现的函数
  private DEFCONFIG: DialogConfig = <DialogConfig>{
    title: '预约说明',
    confirm: '确定',
  };
   config: DialogConfig = {};




  editPatient() {
    this.router.navigate(['/patient/editpatient']);

  }

  onShow(type: SkinType, style: 1 | 2 | 3) {
    this.config = Object.assign({}, this.DEFCONFIG, <DialogConfig>{
      skin: type,
      cancel: null,
      confirm: null,
      btns: null,
      backdrop: true,
      content: '<p align="left">1、预约说明：请完善就诊人信息，填写就诊人身份证号和就诊卡号（若有）等信息，若无就诊卡可先挂号，就诊前再到医院服务台办理。<br>'+
      '2、就诊说明：请于就诊日携带身份证、就诊卡（若有）和医保卡到医院服务台领取挂号凭证，到相关科室签到就诊；如果您是预约挂号，且就诊时签到的时间在预约时间段内，可优先就诊，否则需排队等候。<br>'+
      '3、退号说明：<br>'+
      '“当日挂号”：如需退号，请在就诊前办理<br>'+
      '“预约挂号”：如需退号，请在就诊当日之前办理。</p>'
    });
    switch (style) {
      case 2:
        this.config.confirm = '确定';
        break;
    }
    setTimeout(() => {
      (<DialogComponent>this[`${type}AS`]).show().subscribe((res: any) => {
        console.log('type', res);
      });
    }, 10);
    return false;
  }

  // 实现展开更多的效果
  show() {
    this.shown = !this.shown;
    if (this.shown) {
      this.textdown = '收起';
    }else {
      this.textdown = '展开更多';
    }
  }
   constructor(  private service: TimeService, private router: Router) {
    this.time = this.service.time;
     this.checkbox = this.time; // 时间列表
     this.radio = this.service.person; // 就诊人列表
     this.res.radio = this.radio[0]; // 默认选中第一个
     this.res.checkbox = this.checkbox[0]; // 默认选中第一个
     this.time1 = [];
     this.time2 = [];
     const c = [];
     // 将前四个时间装入time1
    for (let i = 0; i < 4; i++) {
        c.push(this.time[i]);
      this.time1.push(c[i]);

    }

    // 将剩下的时间装入time2
     for (let i = 4; i < this.time.length; i++) {
       c.push(this.time[i]);
       this.time2.push(c[i]);
    }
   }
  ngOnInit(): void {
    this.type = 0;
    this.rtype = 1;
  }
  check() {
  this.simplePopup.hide();
  }

  // 底部弹出框编辑按钮事件
  confirm() {
    this.icon = !this.icon;
    this.num++;
    if ( this.num % 2 !== 0) {
      this.simplePopup.config.confirm = '完成';
    }
    if ( this.num % 2 === 0) {
      this.simplePopup.config.confirm = '编辑';
    }
  }
// 底部弹出框取消按钮事件
  cancel() {
    this.icon = true;
    this.simplePopup.config.confirm = '编辑';
  }
  gotoresult() {
    this.type = 1;
    setTimeout(() => this.router.navigate(['/appoint/result', this.rtype]) , 1000);
  }
}
